<template>
  <div class="user">
    <Breadcrumb>
      <BreadcrumbItem>首页</BreadcrumbItem>
      <BreadcrumbItem>用户管理</BreadcrumbItem>
      <BreadcrumbItem>用户列表</BreadcrumbItem>
    </Breadcrumb>
    <div style="margin-top: 15px;">
      <el-input placeholder="请输入内容" v-model="input3" class="input-with-select">
        <el-button slot="append" icon="el-icon-search" @click="back"></el-button>
      </el-input>
      <el-button type="success" plain @click="dialogFormVisible=true">添加用户</el-button>
      <el-dialog title="添加用户" :visible.sync="dialogFormVisible">
        <el-form :model="form">
          <el-form-item label="用户名" :label-width="formLabelWidth">
            <el-input v-model="form.username" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="密码" :label-width="formLabelWidth">
            <el-input v-model="form.password" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" :label-width="formLabelWidth">
            <el-input v-model="form.email" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="电话" :label-width="formLabelWidth">
            <el-input v-model="form.mobile" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="back1">确 定</el-button>
        </div>
      </el-dialog>
    </div>

    <el-table ref="singleTable" :data="tableData" highlight-current-row style="width: 100%">
      <el-table-column type="index" width="50"></el-table-column>
      <el-table-column property="username" label="姓名" width="100"></el-table-column>
      <el-table-column property="email" label="邮箱" width="180"></el-table-column>
      <el-table-column property="mobile" label="电话" width="200"></el-table-column>
      <el-table-column property="create_time" label="创建日期" width="119"></el-table-column>
      <el-table-column prop="mg_state" label="用户状态">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.mg_state" @change="tabo1(scope.row)"></el-switch>
        </template>
      </el-table-column>

      <el-table-column property label="操作" width="200">
        <template slot-scope="scope">
          <el-button
            type="primary"
            icon="el-icon-edit"
            circle
            size="mini"
            @click="item1(scope.row)"
          ></el-button>
          <el-button
            type="danger"
            icon="el-icon-delete"
            circle
            size="mini"
            @click="open(scope.row)"
          ></el-button>
          <el-button
            type="success"
            icon="el-icon-check"
            circle
            size="mini"
            @click="item3(scope.row)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagenum"
        :page-sizes="[2, 4, 6, 8]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
    <el-dialog title="编辑用户" :visible.sync="dialogFormVisible1">
      <el-form :model="form1">
        <el-form-item label="用户名" :label-width="formLabelWidth">
          <el-input v-model="form1.username" autocomplete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="邮箱" :label-width="formLabelWidth">
          <el-input v-model="form1.email" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="电话" :label-width="formLabelWidth">
          <el-input v-model="form1.mobile" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="item2">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="分配角色" :visible.sync="dialogFormVisible3">
      <el-form :model="form3">
        <el-form-item label="用户名" :label-width="formLabelWidth">
          <span>{{form3.username}}</span>
        </el-form-item>
        <el-form-item label="角色" :label-width="formLabelWidth">
          <el-select v-model="form.region" placeholder="请选择活动区域">
            <el-option label="主管" value="shanghai"></el-option>
            <el-option label="组员" value="beijing"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible3 = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible3 = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import http from "@/api/port";
export default {
  data() {
    return {
      value: true,
      input3: "",
      currentPage4: 4,
      tableData: [],
      pagenum: 1,
      pagesize: 2,
      total: 0,
      dialogFormVisible: false,
      dialogFormVisible1: false,
      dialogFormVisible3: false,
      form: {
        username: "",
        password: "",
        email: "",
        mobile: ""
      },
      form1: {
        username: "",
        email: "",
        mobile: "",
        id: ""
      },
      form3: {
        username: "",
        email: "",
        mobile: "",
        id: ""
      },
      formLabelWidth: "120px",
      rid: ""
    };
  },
  methods: {
    indexMethod(index) {
      return index * 2;
    },
    handleSizeChange(val) {
      this.pagenum = 1;
      this.pagesize = val;
      this.back();
    },
    handleCurrentChange(val) {
      this.pagenum = val;
      this.back();
    },
    back() {
      http("users", {}, "get", {
        query: this.input3,
        pagenum: this.pagenum,
        pagesize: this.pagesize
      }).then(res => {
        console.log("用户数据列表", res);
        this.tableData = res.data.users;
        this.total = res.data.total;
      });
    },
    back1() {
      this.dialogFormVisible = false;
      http(
        "users",
        {
          username: this.form.username,
          password: this.form.password,
          email: this.form.email,
          mobile: this.form.mobile
        },
        "post",
        {}
      ).then(res => {
        this.$message({ message: "添加成功", type: "success" });
        console.log("添加用户", res);
      });
    },
    tabo1(val) {
      console.log(val);
      http(`users/${val.id}/state/${val.mg_state}`, {}, "put", {}).then(res => {
        this.$message({ message: "设置状态成功", type: "success" });
        console.log("开关", res);
      });
    },
    item1(val) {
      console.log(val);
      this.dialogFormVisible1 = true;
      http(`users/${val.id}`, {}, "get", {}).then(res => {
        this.$message({ message: "获取成功", type: "success" });
        console.log("信息", res);
        this.form1.username = res.data.username;
        this.form1.email = res.data.email;
        this.form1.mobile = res.data.mobile;
        this.form1.id = res.data.id;
      });
    },
    item2() {
      this.dialogFormVisible1 = false;
      http(
        `users/${this.form1.id}`,
        {
          email: this.form1.email,
          mobile: this.form1.mobile
        },
        "put",
        {}
      ).then(res => {
        this.$message({ message: "更改成功", type: "success" });
        console.log("更改信息", res);
      });
    },
    open(val) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true
      })
        .then(() => {
          http(`users/${val.id}`, {}, "delete", {}).then(res => {});
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    item3(val) {
      this.dialogFormVisible3 = true;
      http(`users/${val.id}`, {}, "get", {}).then(res => {
        http(
          `users/${val.id}/role`,
          {
            rid: res.data.rid
          },
          "put",
          {}
        ).then(res => {
          this.form3.username = res.data.username;
        });
      });
    }
  },
  created() {
    this.back();
  }
};
</script>
<style lang="scss" scoped>
.inp {
  height: 40px;
  margin: 10px 0;
}
.input-with-select {
  width: 350px;
}
.block {
  padding-top: 10px;
}
</style>